<html>

	<head>
	    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	
		<script type="text/javascript" src="plugin/jquery/jquery-1.5.2.min.js" ></script>
		<script type="text/javascript" src="js/DependencyLoader.js" ></script>
		
	</head>
	
	<body>
		<div id="imageBucket" style="display:none;">
		</div>
		
		<div id="floor" style="position:absolute;overflow: hidden; left: 0px; top: 0px;width:600px;height:600px;border:red solid thin;">
			
		</div>
		<canvas id="canvas" style="position: absolute; left: 0px; top: 0px; border : solid thin black; z-index:1000;"></canvas>
		
		<canvas id="paint" style="border:solid thin green"></canvas>
		
		<div id="scriptBucket">
		</div>
		
		<script type="text/javascript">
			loadDependencies();
		</script>		
		<script type="text/javascript">
				include([
				         'renderers.All'
				         , 'com.unknown.GameWindow'
				         , 'EndlessGrid'
				         , 'InputManager'
				         , 'controller.AnalogStick'], 
					function(){
						canvas.height = (window.innerHeight > 600 ? 600 : window.innerHeight - 100);
						canvas.width = (window.innerWidth > 600 ? 600 : window.innerWidth );
						
						$(floor).css('width', canvas.width);
						$(floor).css('height', canvas.height);
						//floor.height = (canvas.height)
						//floor.width = (canvas.width)
						
						var gameWindow = null;
						try{
							gameWindow = new com.unknown.GameWindow(canvas, imageBucket, null);
	
						gameWindow.createImage('images/tiles/hex_grass_n.png')
						gameWindow.createImage('images/tiles/hex_grass_s.png')
						gameWindow.createImage('images/tiles/hex_grass_ne.png')
						gameWindow.createImage('images/tiles/hex_grass_nw.png')
						gameWindow.createImage('images/tiles/hex_grass_se.png')
						gameWindow.createImage('images/tiles/hex_grass_sw.png')
						gameWindow.createImage('images/tiles/hex_blue_n.png')
							
						gameWindow.start();
						var DEGREES_TO_RADIANS = Math.PI / 180.0;
						var DIV_COUNT = 1;
						var randomGrass = function(){
							var i = Math.floor(Math.random()*7)
							var ext;
							if( i == 0 ){ ext = 'n' }
							if( i == 1 ){ ext = 's' }
							if( i == 2 ){ ext = 'ne' }
							if( i == 3 ){ ext = 'nw' }
							if( i == 4 ){ ext = 'se' }
							if( i == 5 ){ ext = 'sw' }
							if( i == 6 ) return 'images/tiles/hex_blue_n.png';
							return 'images/tiles/hex_grass_' + ext + ".png";
						};
						var randomGrassImg = function(){
							return gameWindow.createImage(randomGrass());
						};
						
						var cellLoader = function(cell, gridMeta, dir){
							//if( true ) return;
							var div = cell.div;
							if( div ){
								//console.log('Disposing: ' + div._id);
								div.remove();
							}							
							div = $(document.createElement('div'));
							div._id = 'DIV-' + (DIV_COUNT++);
							//console.log('Loading: ' + div._id);
							div.css('width', gridMeta.width);
							div.css('height', gridMeta.height);
							//div.css('border', 'solid black thin');
							div.css('margin', '0 0 0 0');
							div.css('padding', '0 0 0 0');
							div.css('position', 'absolute');
							div.css('left', cell.left);
							div.css('top', cell.top);
							//div.css('background-image', "url('images/grass-test.png')");
							//div.css('background-repeat', 'repeat');
							//div.css('-webkit-transform', 'translate('+cell.left +'px, '+cell.top+ 'px)');
							//if(false)
								
							paint.width = gridMeta.width+35;
							paint.height = gridMeta.height+30;
							/*
							var tree = $(document.createElement('div'));
							tree.css('width', 200);
							tree.css('height', 200);
							tree.css('background-image', "url('images/objects/tree_n.png')");
							//tree.css('z-index', 2);
							div.append( tree ); 
							
							var grass = $(document.createElement('div'))
							grass.css('width', gridMeta.width);
							grass.css('height', gridMeta.height);
							grass.css('background-image', "url('images/grass-test.png')");
							grass.css('background-repeat', 'repeat');
							//grass.css('z-index', 1);
							div.append(grass);
							*/
								
							for(var y=0; y<gridMeta.rowCount; y++){
								for(var x=0; x < gridMeta.colCount; x++){
									var off = 0;
									if( y % 2 != 0 ){
										off = 35;
									}
									
									var img = $(document.createElement('img'));
									img.attr('src', randomGrass());
									img.css('position', 'relative');
									img.css('left', (x*20+off) );
									img.css('top', (y*-35)-10);
									img.css('width', 50);
									img.css('height', 50);
																		
									div.append(img);
								}
								div.append('<br/>');
							}
							
							//div.attr('src', paint.toDataURL());
							//c2d.clearRect( 0, 0, gridMeta.width, gridMeta.height);
							cell.div = div;
							cell.moving = function(){
								//console.log("Moving: " + div._id + " " + this.left + ", " + this.top);
								var h = gridMeta.height;
								var y = this.top;
								var z = 0;
								while( 0 < y ){
									z += 100;
									y -= h;
								}
								this.div.offset({left:this.left, top:this.top})
								//this.div.css('left', this.left);
								//this.div.css('top', this.top);
								this.div.css('z-index', z);
							};
							//div.load(')
							$('#floor').append( div );
						};
						
						var eGrid = new EndlessGrid(canvas, cellLoader, {cellWidth:70, cellHeight:15, rowCount:20, colCount:5});
						gameWindow.entities["grid"] = eGrid;
						var move = {x:0, y:0};
						gameWindow.entities["test"] = {
							render : function(gw){
								if( move.x || move.y )
									eGrid.translate(move.x, move.y);
							},
							intersects : function(){ return false; }
							,setActive : function(){}
						};
						//var stick = new AnalogStick();
						
						//gameWindow.renderers["bb"]  = new BoundingBoxRenderer('bb', false);
						gameWindow.renderers["std"] = new StandardRenderer();
						
						var inputManager = new InputManager();
						if( 'createTouch' in document ){
							new TouchInputDevice(inputManager, canvas);
						}else{
							new MouseInputDevice(inputManager);	
						}
						
						new KeyboardInputDevice(inputManager);
						
						var selectMode = {
							current : null,
							start   : null,
							onMove  : function(e){
								if(e.bId /*&& e.bId.id == 'keyboard'*/){
									var MAX = 10;
									var sX = this.start.x;
									var sY = this.start.y;
									var moveX = e.x-sX;
									moveX = Math.abs(moveX) > MAX ? MAX*(moveX/Math.abs(moveX)) : moveX;
									var moveY = e.y-sY;
									moveY = Math.abs(moveY) > MAX ? MAX*(moveY/Math.abs(moveY)) : moveY;
									move.x = moveX;
									move.y = moveY;
								}								
								if(e.bId && this.current){
									var sX = this.start.x;
									var sY = this.start.y;
									this.current.move(e.x-sX, e.y-sY);
								}
								if( e.bId ){
									eGrid.hit(e);
								}
							},
							onButtonDown : function(e){
								this.start = {x:e.x, y:e.y};
								eGrid.hit(e);
								iterate(gameWindow.entities, function(entity){
									try{
										var intersection = (entity ? entity.intersects(e) : null);
										if(!this.current && intersection ){
											entity = intersection.pop();
											this.current = entity;
											entity.setActive(true);
										}else if(entity){
											entity.setActive(false);
										}
									}catch(ex){
										console.error(ex);
									}
								});
							},
							onButtonUp : function(e){
								this.current = null;
								move.x = 0;
								move.y = 0;
							}
						};
						inputManager.addListener('paint', selectMode);
						}catch( ex ) { 
							console.error(ex);
						}					
					}
				);
		</script>
		
	</body>
</html>